<template>
    <div class="rootMain">
        <el-form
            class="personalData"
            :label-position="labelPosition"
            label-width="98px"
            :model="formLabelAlign"
        >
            <el-form-item class="formItem flex-align" label="头像">
                <template slot="label">头&emsp;&emsp;像</template>
                <el-upload
                    class="avatar-uploader"
                    :action="imgUploadUrl"
                    :show-file-list="false"
                    :on-success="onSuccess"
                    :on-error="onError"
                    :auto-upload="true"
                    :headers="header"
                >
                    <div class="avatar">
                        <div class="avatarImg">
                            <img
                                class="img100"
                                style="object-fit: cover"
                                :src="headImageUrl"
                                alt=""
                            />
                        </div>
                        <div class="editBox">修改</div>
                    </div>
                    <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                </el-upload>
            </el-form-item>
            <el-form-item class="flex" label="昵称">
                <template slot="label">昵&emsp;&emsp;称</template>
                <div class="flex">
                    <el-input
                        v-model="form.nickNameInput"
                        type="text"
                        maxlength="8"
                    ></el-input>
                    <div style="width: 200px" class="c999 ml10">4-10个字符</div>
                </div>
            </el-form-item>
            <el-form-item class="flex" label="手机号码">
                <div class="c666">
                    {{
                        userInfo &&
                        userInfo.mobile.slice(0, 3) +
                            "****" +
                            userInfo.mobile.slice(7, 11)
                    }}
                </div>
            </el-form-item>
            <el-form-item class="flex" label="邮箱">
                <template slot="label">邮&emsp;&emsp;箱</template>

                <el-input
                    style="width: 274px"
                    v-model="form.emailInput"
                    type="text"
                ></el-input>
            </el-form-item>
            <el-form-item class="flex" label="">
                <template slot="label">所在地区</template>
                <el-cascader
                    ref="cascaderAddr"
                    class="fixed-input"
                    v-model="city"
                    :options="region"
                    :props="{
                        value: 'name',
                        label: 'name',
                        children: 'children',
                    }"
                    clearable
                    filterable
                    @change="changeAddr"
                ></el-cascader>
            </el-form-item>
            <el-form-item class="flex" label="">
                <template slot="label">所属行业</template>
                <el-select v-model="form.trade" placeholder="请选择">
                    <el-option
                        v-for="item in tradeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="flex" label="" label-width="217px">
                <template slot="label">感兴趣的税种（最多选3个）</template>
                <el-select
                    v-model="form.belong_tax"
                    multiple
                    placeholder="请选择"
                    :multiple-limit="3"
                    style="width: 406px"
                >
                    <el-option
                        v-for="item in belong_tax_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="flex" label="个人介绍">
                <el-input
                    style="width: 400px"
                    type="textarea"
                    v-model="form.introduce"
                ></el-input>
            </el-form-item>

            <el-form-item class="flex" label="">
                <template slot="label">角色</template>
                <el-select
                    v-model="form.position"
                    placeholder="请选择"
                    style="width: 406px"
                >
                    <el-option
                        v-for="(item, index) in position"
                        :key="index"
                        :label="item"
                        :value="index + 1"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                v-if="userInfo && userInfo.is_major == 1"
                class="flex"
                label="专业方向"
            >
                <el-select
                    v-model="form.major_direction"
                    multiple
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in directionList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <div class="save" @click="changePage">保存</div>
        </el-form>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getlabel_chat } from "@/assets/api/csjhApi";

import {
    editUserInfo,
    get_trade,
    push_tax_list,
} from "@/assets/api/userCenterApi.js";
import region from "@/assets/json/region-just-city.json";
import axios from "axios";

export default {
    data() {
        return {
            form: {
                nickNameInput: "",
                emailInput: "",
                introduce: "",
                major_direction: [],
                city: "",
                trade: "",
                belong_tax: "",
                position: "",
            },
            labelPosition: "right",
            formLabelAlign: {
                name: "",
                region: "",
                type: "",
            },
            imgUploadUrl: "", //头像上传地址
            headImageUrl: "", //头像的地址

            token: "",
            directionList: [],
            region: [],
            city: [],
            tradeList: [],
            tradeIndex: [],

            belong_tax_list: [],

            position: ["会计", "出纳", "主管", "经理", "总监", "老板"],
        };
    },
    mounted() {
        this.getlabel_chat();
        this.token = localStorage.getItem("token");
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";

        this.headImageUrl = this.userInfo && this.userInfo.avatar;

        this.form.nickNameInput = this.userInfo && this.userInfo.nickname;
        this.form.emailInput = this.userInfo && this.userInfo.email;
        this.form.introduce = this.userInfo && this.userInfo.bio;
        this.form.position = this.userInfo && this.userInfo.position;
        if (this.userInfo && this.userInfo.major_direction) {
            this.form.major_direction =
                this.userInfo && this.userInfo.major_direction.split(",");
        }

        this.get_trade();
        this.getRegionList();
        this.get_belong_tax_list();
    },
    computed: {
        ...mapState("userCenter", {
            showInfo: (state) => state.showInfo,
        }),
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),

        //上传图片的请求头
        header() {
            return {
                token: this.token,
            };
        },
    },
    methods: {
        changePage() {
            this.setshowInfo(true);
            this.editUserInfo();
        },
        ...mapMutations("userCenter", ["setshowInfo"]),

        ...mapActions("common", ["getUserInfo"]),

        getRegionList() {
            let regionList = region;
            for (let items of regionList) {
                if (this.userInfo.belong_area.includes(items.name))
                    this.city[0] = items.name;
                for (let item of items.children) {
                    if (this.userInfo.belong_area.includes(item.name))
                        this.city[1] = item.name;
                    delete item.children;
                }
            }
            this.region = regionList;
        },

        async get_belong_tax_list() {
            const res = await push_tax_list({});
            if (res.code == 1) {
                this.belong_tax_list = res.data;
                this.form.belong_tax = this.userInfo.belong_tax_id
                    .split(",")
                    .map((item) => {
                        return parseInt(item);
                    });
            }
        },

        async get_trade() {
            const res = await get_trade({});
            if (res.code == 1) {
                this.tradeList = res.data;
                for (let i = 0; i < res.data.length; i++) {
                    if (this.userInfo.belong_trade == res.data[i].name) {
                        this.form.trade = res.data[i].id;
                        return;
                    }
                }
            }
        },

        //修改资料
        async editUserInfo() {
            let params = {
                avatar: this.headImageUrl,
                nickname: this.form.nickNameInput,
                email: this.form.emailInput,
                bio: this.form.introduce,
                belong_trade: this.form.trade,
                belong_tax: this.form.belong_tax.join(),
                belong_area: this.form.city,
                major_direction: this.form.major_direction.join(","),
                position: this.form.position,
            };
            let res = await editUserInfo(params);
            if (res.code == 1) {
                //更新vuex中的userinfo
                this.getUserInfo();
            }
        },
        onSuccess(response, file, fileList) {
            console.log("onSuccess", response);
            this.headImageUrl = response.data.fullurl;
        },
        onError(err, file, fileList) {
            console.log("err", err);
        },

        //地址的选择
        changeAddr(citys) {
            console.log(this.city);
            this.form.city = this.$refs["cascaderAddr"]
                .getCheckedNodes()[0]
                .pathLabels.join("");

            console.log(this.form.city);
        },

        async getlabel_chat() {
            const res = await getlabel_chat({});
            if (res.code == 1) {
                for (let item of res.data) {
                    item.checked = false;
                }
                this.directionList.push(...res.data);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/iconfont.css");
@import url("@/assets/static/reset.css");

.personalData {
    position: relative;
    margin-left: 20px;
    padding: 30px;
    background-color: #fff;

    .avatar {
        position: relative;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        overflow: hidden;

        .avatarImg {
            width: 68px;
            height: 68px;
        }

        .editBox {
            position: absolute;
            top: 48px;
            left: 0;
            text-align: center;
            width: 68px;
            // height: 20px;
            line-height: 20px;
            background-color: #000000;
            color: #fff;
            font-size: 12px;
            // margin-bottom: 40px;
        }
    }

    .nickName {
        color: #666666;
    }

    ::v-deep .el-form-item__content {
        margin-left: 40px !important;
    }
    ::v-deep .el-form-item__label {
        color: #333;
        min-width: 98px;
    }
}

.save {
    position: absolute;
    top: 60px;
    right: 55px;
    text-align: center;
    line-height: 31px;
    width: 79px;
    height: 31px;
    background: #1c87f3;
    border-radius: 35px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

::v-deep .el-select {
    width: 524px;
}
::v-deep .el-textarea__inner {
    width: 524px;
}
</style>
